<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="css/bulma.min.css">

    <style>
        .act{
            background-color: lightyellow;
        }
        .fo-love{
            font-size: 22px;
            color: green;
        }
    </style>
</head>
<body>
    <!--show 只是修改样式，不会重构dom结构-->
    <div id="app">
       用户名：
        <input type="text" v-model="inputName">
        性别：
        <input type="text" v-model="inputGender">
        <table class="table">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>邮箱</th>
                    <th>电话</th>
                    <th>地址</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="info in infoss">
                    <td>{{info.name}}</td>
                    <td>{{info.gender}}</td>
                    <td>{{info.email}}</td>
                    <td>{{info.phone}}</td>
                    <td>{{info.address}}</td>
                </tr>
            </tbody>
        </table>


    </div>

</body>
    <script>
        var  app = new Vue({
            el:'#app',
            data:{
                inputName:'',
                inputGender:'',
                infos:[
                    {
                        "_id": "5dd38d6bb4bb9fa9cd5a3ad7",
                        "name": "Horn Strickland",
                        "gender": "male",
                        "email": "hornstrickland@pholio.com",
                        "phone": "+1 (993) 427-3511",
                        "address": "646 Cass Place, Belmont, Louisiana, 5140"
                    },
                    {
                        "_id": "5dd38d6b14619c31dbd20c62",
                        "name": "Earnestine Berg",
                        "gender": "female",
                        "email": "earnestineberg@pholio.com",
                        "phone": "+1 (829) 555-3279",
                        "address": "947 Billings Place, Conestoga, Maryland, 7131"
                    },
                    {
                        "_id": "5dd38d6b9dcda2589c79c7f3",
                        "name": "Daniels Justice",
                        "gender": "male",
                        "email": "danielsjustice@pholio.com",
                        "phone": "+1 (827) 480-2558",
                        "address": "251 Beadel Street, Bradenville, Guam, 3593"
                    },
                    {
                        "_id": "5dd38d6bded0b076eec61e01",
                        "name": "Jodi Booth",
                        "gender": "female",
                        "email": "jodibooth@pholio.com",
                        "phone": "+1 (863) 459-2637",
                        "address": "873 Gatling Place, Dixonville, New Hampshire, 1237"
                    },
                    {
                        "_id": "5dd38d6b56fe7c9af6a7cf05",
                        "name": "Helene Jennings",
                        "gender": "female",
                        "email": "helenejennings@pholio.com",
                        "phone": "+1 (916) 469-2532",
                        "address": "543 Dearborn Court, Dixie, New York, 2743"
                    }
                ]
            },
            computed:{
                infoss:function () {
                    var inputGender = this.inputGender
                    var inputname = this.inputName
                    return this.infos.filter(function (value) {
                        var g = false;
                        var n = false;
                        if(inputname === ''){
                            n = true
                        }else{
                            return value.name.match(inputname)
                        }
                        if(inputGender === ''){
                            g = true;
                        }else{
                            g = value.gender === inputGender
                        }
                        return( n && g)
                    })
                }
            }
        })
    </script>
</html>